/**
 * app-route
 */
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

// 组件引入
import { HomeComponent } from './Home/index.component';
import { FormComponent } from './Form/index.component';
import { NgForComponent } from './ng-for/index.component';
import { InputOutputComponent } from './parent-child/index.component';
import { TemplateFormComponent } from './template-form/template-form.component';
import { ReactiveFromComponent } from './reactive-from/reactive-from.component';
import { ValidatorDirectiveComponent } from './validator-directive/validator-directive.component';
import { CustomFormcontrolComponent } from './custom-formcontrol/custom-formcontrol.component';
import { AsyncDataComponent } from './async-data/async-data.component';
import { TestPagesComponent } from './test-pages/test-pages.component';

// 定义路由对象
const appRoutes: Routes = [
  { path: '', component: HomeComponent },  // 主页
  // tips: 路由定义path, 不能带有'/'， 比如 '/form'
  { path: 'form', component: FormComponent }, // 表单基础
  { path: 'ngForm', component: NgForComponent }, // ngFor实例
  { path: 'componentinput', component: InputOutputComponent },  // 父子组件的input 和 output
  { path: 'templateform', component: TemplateFormComponent }, // template-form
  { path: 'reactiveform', component: ReactiveFromComponent }, // reactive-form
  { path: 'validatordirective', component: ValidatorDirectiveComponent }, // validatordirective 自定义验证指令
  { path: 'customformcontrol', component: CustomFormcontrolComponent }, //  自定义表格控件
  { path: 'asyncdata', component: AsyncDataComponent }, // 异步数据;
  { path: 'test', component: TestPagesComponent }, // 测试页面;

  // 模块加载路径
  // loadChildren：惰性加载模块： path路径 + '#' + moduleName
  { path: 'changedetection', loadChildren: 'app/change-detection/change-detection.module#ChangeDetectionModule' }
];

// 把路由结合到NgModel中
@NgModule({
  // angular内置模块
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  // exports是必须的，因为它可以是组件 router-outlet 被识别;
  exports: [ RouterModule ],
})
export class AppRouteModel {}
